<script setup lang="ts"></script>

<template>
  <div class="layout-page">
    <!-- 二级路由出口 -->
    <router-view></router-view>

    <!-- tabbar -->
    <!-- route开启路由模式 -->
    <van-tabbar route>
      <van-tabbar-item to="/home">
        首页
        <template #icon="obj">
          <CpIcon :name="`home-index-${obj.active ? 'active' : 'default'}`"></CpIcon>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/article">
        百科
        <template #icon="{active}">
          <CpIcon :name="`home-article-${active?'active':'default'}`"></CpIcon>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/notify">
        消息
        <template #icon="{active}">
          <CpIcon :name="`home-notice-${active?'active':'default'}`"></CpIcon>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/user">
        我的
        <template #icon="{active}">
          <CpIcon :name="`home-mine-${active?'active':'default'}`"></CpIcon>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss" scoped></style>
